<template>
  <div>
     <el-page-header  @back="$router.push('/couriermanagement')" content="作业范围分配" class="huidan" style="margin-bottom:20px"></el-page-header>
    <el-card>
        <template #header>
          <span class="header-text">作业范围</span>
          <el-button>编辑</el-button>
        </template>
        <div class="work-map">
          <span style="font-size:14px">地区关键词：</span>
          <el-input v-model="mapsearch" placeholder="请输入地区关键词" style="width:230px" clearable/>
          <!-- <div id="bdMap" /> -->
        </div>

        <!--创建地图容器-->
         <!-- <div id="bdMap" /> -->
 <baidu-map
    id="bm-view"
    :center="center"
    :zoom="zoom"
    :scroll-wheel-zoom="true"
  ></baidu-map>
      </el-card>
  </div>
</template>

<script>
// import { BMPGL } from '@/bmpgl.js'
// import { getMapinfoApi } from '@/api/institution'

export default {
  name: 'distribution-info',
  data () {
    // const point = new BMapGL.Point(116.404, 39.915)
    // const marker = new BMapGL.Marker(point) // 创建标注
    // map.addOverlay(marker)
    return {
      mapsearch: '',
      center: { lng: 116.404, lat: 39.915 }, // 经纬度
      zoom: 10 // 地图展示级别
    }
  }
  // mounted () {
  //   this.initMap()
  // },
  // methods: {
  //   async getOrgizationInfo (nodekey) {
  //     const res = await getMapinfoApi(nodekey)
  //     console.log(res)
  //     this.mapInfo = res
  //     this.initMap()
  //   },
  //   initMap () {
  //     BMPGL('UNnu0yGtkhcA2utPAGG8EqpG18yr32fb').then((BMapGL) => {
  //       // 创建地图实例
  //       const map = new BMapGL.Map('bdMap')
  //       // 创建点坐标 axios => res 获取的初始化定位坐标
  //       const point = new BMapGL.Point(this.mapInfo.longitude, this.mapInfo.latitude)
  //       // 初始化地图，设置中心点坐标和地图级别
  //       map.centerAndZoom(point, 11)
  //       // 地图覆盖
  //       const polygon = new BMapGL.Polygon(
  //         this.mapInfo.polygon.map(item => new BMapGL.Point(item.longitude, item.latitude))
  //         , { strokeColor: 'pink', strokeWeight: 1, strokeOpacity: 0.5, fillOpacity: 0.5, fillColor: 'pink' })
  //       map.addOverlay(polygon)
  //       // 搜索
  //       const local = new BMapGL.LocalSearch(map, {
  //         renderOptions: { map: map, panel: 'r-result' }
  //       })
  //       local.search(this.mapsearch)
  //       map.enableScrollWheelZoom(true)
  //       map.setHeading(10)
  //       map.setTilt(10)
  //       // 保存数据
  //       // this.myMap = map
  //     })
  //       .catch((err) => {
  //         console.log(err)
  //       })
  //   }

  // }
}
</script>

<style lang="scss" scoped>
.el-card{
     ::v-deep .el-card__header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        // margin-left: 20px;
        height: 60px;
        background-color: #f8faff;
        .header-text{
          font-size: 16px;
          font-weight: 700;
          color: #2a2929;
        }
       .el-button {
          width: 90px;
          background-color: #e15536;
          color: #fff;
          border-radius: 5px;
        }
      }
    }
    #bm-view {
  width: 1200px;
  height: 500px;
  margin-top: 20px;
}
</style>
